<template>
	<div>
		<el-dialog :title="pname" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit" >
			<el-form :model="dataForm" :rules="dataRule" :validate-on-rule-change="false" ref="dataFormRef" @keyup.enter.native="dataFormSubmit()" label-width="100px">
				<el-form-item v-for="(item,index) in startNodeInfo.formProperties" :key="index" :label="item.name" :prop="item.id">
					<el-input v-if="item.type === 'string'" v-model="dataForm[item.id]" :placeholder="item.name"></el-input>
					<el-select v-if="item.type === 'enum'" v-model="dataForm[item.id]" filterable :placeholder="item.name">
						<el-option v-for="itemc in item.formValues" :key="itemc.id" :label="itemc.name" :value="itemc.id"></el-option>
					</el-select>
					<el-input v-if="item.type === 'long'" v-model="dataForm[item.id]" :placeholder="item.name" type="number" max="200" min="0"></el-input>
					<el-date-picker v-if="item.type === 'date'" v-model="dataForm[item.id]" :placeholder="item.name" type="date"></el-date-picker>
				</el-form-item>
			</el-form>
			<!-- <el-button type="success"  icon="ele-Check" @click="dataFormSubmit()">提交</el-button> -->
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(dataFormRef)">提交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
	import { ref, toRefs, reactive, defineComponent } from 'vue'
	import type { FormInstance  } from 'element-plus'
	import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
	import {workflowApi} from '/@/api/workflowapi'
	export default defineComponent ({
		setup (props, ctx) {
			const dataFormRef = ref<FormInstance>()
			const state = reactive({
				dataForm: null,
				startNodeInfo:{},
				dataRule: {
				},
				processKey: '',
				pname: '',
				visible: false
			})
			// 打开弹窗
			const openDialog = (processName: string, pkey: string) => {
				state.pname = processName + '流程发起'
				state.processKey = pkey
				init()
				state.visible = true
			}
			const init = () => {
				workflowApi().getModelStartNodeInfo(state.processKey).then(data => {
					state.startNodeInfo = data.flowElement
					let rulesForm = []
					data.flowElement.formProperties.forEach((item, index, arr) => {
						rulesForm[item.id]
						if(true === item.required) {
							state.dataRule[item.id] = [{ required: true, message: item.name + '不能为空', trigger: 'change' }]
						}
					})
					state.dataForm = {...rulesForm}
				}).catch(() => {
					ElMessage.error('加载表单信息失败')
				})
			}
			const dataFormSubmit = (formEl: FormInstance | undefined) =>{
				if (!formEl) return
				formEl.validate((valid: boolean) => {
					if (valid) {
						const loading = ElLoading.service({
							lock: true,
							text: '处理中',
							background: 'rgba(0, 0, 0, 0.7)',
						})
						workflowApi().subminTask({
							'discicription': '发起流程',
							'processKey': state.processKey,
							'skipFirstNode': false,
							'authCatagory': '0',
							'formProperties': state.dataForm
						}).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('提交成功')
								closeDialog()
								ctx.emit('refreshDataList')
							} else {
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('提交流程失败')
						}).finally(() => {
							loading.close()
						})
					}
				})
			}
			const refreshEmit = () => {
				closeDialog()
				ctx.emit('refreshDataList')
			}
			// 关闭弹窗
			const closeDialog = () => {
				state.visible = false;
			}
			return {
				init,
				dataFormSubmit,
				dataFormRef,
				openDialog,
				refreshEmit,
				...toRefs(state),
			}
		}
	})
</script>